@fz10: 10px;
@fz12: 12px;
@fz14: 14px;
@fz16: 16px;
@color-h1: #111111;
@color-h2: #656565;
@color-h3: #919191;
@color-h4: #DF0011;
@color-bg: #f3f4f5;
@theme-color: #DF0011;
page {
  height: 100%;
  font-size: @fz14;
  box-sizing: border-box;
  background-color: @color-bg;
}

view,
button,
input {
  box-sizing: border-box;
}

// main
.main {
  position: relative;
  z-index: 1;
  padding: 44px 12px 12px;
  height: 100%;
}

.effect-wrap{
  height: 100%;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 8px 1px rgba(230,0,18,0.04);
  border-radius:5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .preview{
    padding: 12px 0;
  }
  .preview-img{
    width: 220px;
    min-height: 0;
    background: black;
  }
  .preview-name{
    line-height: 2;
    font-size: @fz14;
    color: @color-h2;
  }
}

.list{
  width: 100%;
  height: 100%;
  margin: 0 -6px;
  padding: 12px 6px;
  display: flex;
  flex-wrap: wrap;
  align-content:flex-start;
  align-items:flex-start;
  overflow: auto;
  &::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  &__item{
    width: 33.3333%;
    padding: 0 6px;
    margin-bottom: 36px;
    .item{
      width: 100%;
      height: 0;
      padding-top: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      &__img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background:black;
      }
      &__text{
        width: 100%;
        position: absolute;
        left: 0;
        bottom: -24px;
        text-align: center;
        font-size: @fz14;
        color: @color-h2;
      }
    }
  }
}